import { PageContainer } from '@ant-design/pro-layout';
import React, {useRef} from 'react';
import {message, Switch} from "antd";
import {getCard} from "@/services/ant-design-pro/card";
import ProTable, {ActionType} from "@ant-design/pro-table";

const ModalCamille = () => {
  const actionRef =  useRef<ActionType>();


  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      align:'center',
      search:false
    },
    {
      title: '卡号',
      dataIndex: 'card_number',
      align:'center',
    },
    {
      title: '密码',
      dataIndex: 'card_passeord',
      search:false,
      align:'center',
    },
    {
      title: '领取人名称',
      dataIndex: 'reca_name',
      search:false,
      align:'center',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      align:'center',
    },
    {
      title: '领取时间',
      dataIndex: 'user_time',
      search:false,
      align:'center',
    },
    {
      title: '是否激活',
      dataIndex: 'status',
      search: false,
      align:'center',
      render:(_,record)=>[
        <Switch
          checkedChildren="激活"
          unCheckedChildren="冻结"
          defaultChecked={record.status}
          onChange={ async(state)=>{
            getCard({
              id:record.id,
              status:state ? 1 : 0
            }).then(()=>{
              message.success('操作成功！')
              actionRef.current.reload();
            })
          }}
        />,
      ]
    },
    {
      title:'是否激活',
      dataIndex: 'status',
      hideInTable: true,
      valueEnum: {
        '0': { text: '已激活', status: 'Default' },
        '1': { text: '未激活', status: 'close' },
      },
    }
  ]

  return (
    <PageContainer>
        <ProTable
          actionRef={actionRef}
          columns={columns}
          request={async (params)=>{
            // console.log(params)
            const {data,meta} = await getCard({...params})
            return {
              data,
              success:true,
              total:meta.pagination.total
            }
          }}
          rowKey="id"
          dateFormatter="string"
          toolBarRender={false}
        />
    </PageContainer>
  );
};

export default ModalCamille;
